<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <style type="text/css">
        body {
            background: #fff;
            font-size: 14px;
        }
        .myBtn{
            margin: 0 auto;
            border-radius: 5px;
        }
        .aui-icon-left{
            position: fixed;
            top: 15px;
            left: 15px;
            z-index: 9;
        }
        input.inputCardNo{
            line-height: 25px;
            margin: 0;
            width: inherit;
            padding: 0;
            border: 0;
            width: 80%;
            background:#f7f7f7;
        }
        .contain{
            margin: 15px;
            margin-top: 80px;
        }
        .myBtn.disable{
            background: #d9d9d9;
            color: #bababa;
        }
        ul.aui-list-view{
            background: #f7f7f7;
            padding:0 10px;
            border-radius: 5px; 
        }
        .aui-list-view-cell{
            padding: 12px 0;
        }
        .aui-list-view:after{
            border: 0;  
        }
    </style>
</head>
<body>
<header>
    <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
</header><!-- /header -->
<div class="contain">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell" >
            <span>手机号</span>
            <input type="number" oninput="checkAll()"   onpropertychange="checkAll()"  onblur="checkPhone(this)" placeholder="输入手机号码"  class="inputCardNo phoneNo"  >
        </li>
        <li class="aui-list-view-cell" >
            <span>密码</span>
            <input type="password" oninput="checkAll()"  onpropertychange="checkAll()" onblur="checkPassLength(this)" placeholder="6-20位数字或字母"  class="inputCardNo password" >
        </li>
        <li class="aui-list-view-cell" >
            <span>推荐人</span>
            <input type="number"   placeholder="填写推荐人手机号" oninput="checkAll()"   onpropertychange="checkAll()"  onblur="checkPhone(this)" class="inputCardNo recommendNo" >
        </li>
    </ul>  
    <div class="myBtn disable btnCardNo" tapmode >下一步</div> 
</div>


</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/index.js"></script>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();
        
    }
    // function showLeft(){
    //     $(".contain").addClass("showLeft");
    //     $(".close").css({"display":"none"});
    //     $(".closeLeft").css({"display":"block"});
    // }
    // function closeLeft(){
    //     $(".contain").removeClass("showLeft");
    //     $(".close").css({"display":"block"});
    //     $(".closeLeft").css({"display":"none"});
    // }
    function checkPhone(obj){
        var phoneNo=$(obj).val().trim();
        var tips;
        if($(obj).hasClass("recommendNo")){
            tips="请正确填写推荐人号码";
        }else{
            tips="请填写正确号码";
        }
        if(!isPhoneNo(phoneNo)){
            alert(tips);
            $(obj).focus();
        }
    }
    function checkPass(){
        var pass=$(".password").val();
        if((pass.length<6)||(pass.length>20)){
            return false;
        }else{
            return true;
        }
    }
    function checkPassLength(obj){
        var pass=$(obj).val();
        if((pass.length<6)||(pass.length>20)){
            alert("请输入6-20位数字或字母的密码");
            $(obj).focus();
            return false;
        }else{
            return true;
        }
    }
    function checkAll(){
        var phoneNo=$(".phoneNo").val();
        var recommendNo=$(".recommendNo").val();
        if(checkPass()&&isPhoneNo(phoneNo)&&isPhoneNo(recommendNo)){
           $(".myBtn").removeClass("disable"); 
        }else{
           $(".myBtn").addClass("disable"); 
        }
    }
</script>
</html>